<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>个人主页</title>
  <link rel="stylesheet" href="./css/zxg-base.css">
  <link rel="stylesheet" href="./css/my-homepage.css">
  <link rel="stylesheet" href="./css/message.css">
</head>
<body class="body-hide">
<div class="layout">
  <!-- vote -->
  <header class="vote">
    <div class="vote-info">
      <div class="vote-info-header">
        <div class="vote-info-header-left">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-info-header-right">
          <h2>Timo</h2>
          <p>斥候</p>
        </div>
      </div>
      <div class="vote-info-num">
        <span>编号: 007</span>
        <span>排名: <i>20</i></span>
        <span>得票: <i>321</i></span>
      </div>
      <div class="vote-info-text">
        <span>参赛宣言: </span>
        <span>人越是转向光明，他身后的阴影就越大。人的能力越大，他的责任就越大。</span>
      </div>
    </div>
    <div class="vote-btn">
      <button>投票</button>
      <span>( 每天投票可获得10元以内随机红包 )</span>
    </div>
  </header>
  <!--works-->
  <main class="works clearfix">
    <h3>手艺作品展示: </h3>
    <div class="works-box clearfix">
        <img src="./images/timg.jpg" alt="">
        <img src="./images/active-rule-content.jpg" alt="">
        <img src="./images/active-rule-header.jpg" alt="">
        <img src="./images/close.jpg" alt="">
        <img src="./images/popup.png" alt="">
        <img src="./images/redbag.png" alt="">
        <img src="./images/share-allow.png" alt="">
        <img src="./images/timg.jpg" alt="">
    </div>
    <div class="works-vote clearfix vote-worker">
      <div class="works-vote-left">
        <span>工人: 6票</span>
        <span>得票: 3x6 <i>18</i>票</span>
      </div>
      <div class="works-vote-right">
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="works-vote clearfix vote-manager">
      <div class="works-vote-left">
        <span>项目经理: 6票</span>
        <span>得票: 6x6 <i>36</i>票</span>
      </div>
      <div class="works-vote-right">
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="works-vote clearfix vote-tourist">
      <div class="works-vote-left">
        <span>游客: 6票</span>
        <span>得票: 1x6 <i>6</i>票</span>
      </div>
      <div class="works-vote-right">
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
        <div class="vote-right-img">
          <img src="./images/timg.jpg" alt="">
        </div>
      </div>
    </div>
    <p>总票数: <i>60</i>票</p>
    <div class="list-btn-box">
      <a href="./personnel-list.html" class="list-btn">参赛人员列表 <span> > </span></a>
    </div>
  </main>
  <!--message-->
  <footer class="message">
    <div class="message-title clearfix">
      <h3>留言: </h3>
      <a href="javascript:;" class="message-me">我要留言</a>
    </div>
    <ul class="message-box">
      <li class="message-box-list">
        <span>工人: 妞妞</span>
        <span>2018-01-14</span>
        <p>手法赞赞赞😄</p>
      </li>
      <li class="message-box-list">
        <span>工人: 妞妞</span>
        <span>2018-01-14</span>
        <p>手法赞赞赞🙎</p>
      </li>
    </ul>
  </footer>
  <!--底部固定块-->
  <div class="personnel-list-fixed clearfix">
    <a href="./active-rule.html#rule-content">活动规则</a>
    <a href="./woyaocansai.html">我要参赛</a>
  </div>
</div>
<!--message-inp-->
<div class="message-inp clearfix">
  <div class="message-inp-left">我要留言</div>
  <div class="message-inp-right">
    <textarea name="" id="textarea" placeholder="努力就会更好" autofocus="autofocus" oninput="font_siz()"></textarea>
    <span> <i id="num">0</i>/40 </span>
  </div>
  <button class="inp-sure">确定</button>
  <span class="message-close">X</span>
</div>
<!--share-->
<div id="share">
  <div class="share-allow"></div>
  <p>你已成功参与比赛, 点击右上角分享按钮分享, 再返回装修哥即可获得领取红包特权. </p>
  <span>(按任意处退出)</span>
</div>
<!--popup-->
<div class="popup">
  <div class="popup-box" id="capture">
    <button id="close"></button>
    <h2>扫码领红包</h2>
    <div class="redbag clearfix">
      <div id="qrcode"></div>
    </div>
    <dl>
      <dt>领奖步骤：</dt>
      <dd>1、长按二维码->'识别二维码'；</dd>
      <dd>2、或截图后进入微信点击扫一扫；</dd>
      <dd>3、点击扫一扫右上角相册；</dd>
      <dd>4、选择该截图即可获得红包。</dd>
    </dl>
  </div>
</div>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/qrcode.min.js"></script> <!--生成二维码-->
<script src="./js/message.js"></script>  <!--showMsg-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <!--用户ip获取-->
<script src="./js/cookie.js"></script>  <!--cookie-->
<script>
  $(document).ready(function () {
    stop('#share');
    // 投票
    $(".vote-btn button").on('click', function () {
      if(cookie('key')) {
        showMsg('您今天已经投过票了!','center');
        return;
      }
      // ajax发送表单
      var cId = 111;  // 被投票人id
      var uId = 222;  // 投票人id
      var uIp = returnCitySN["cip"];  // 投票人ip
      var cookieId = cookie('key');
      // console.log(returnCitySN["cip"] + ',' + returnCitySN["cname"] + ',' + returnCitySN["cid"]);
      $.ajax({
        url: '',
        dataType: 'json',
        type: 'post',
        data: {'cId': cId,'uId': uId,'uIp': uIp,'uTxt': $('#textarea').val()},
        success: function (data) {
        }
      })
      cookie('key','value',1)
      showMsg('投票成功, 扫码领红包!','center');
      $(".popup").fadeIn(1000);
      stop('.popup')
    });
    // 投票关闭
    $("#close").on('click', function () {
      $(".popup").css("display", "none");
      move('.popup')
    });
    // 我要留言
    $(".message-me").on('click', function () {
      $(".message-inp").css("display", "block");
      $('#textarea')[0].focus();
    });
    // 我要留言关闭
    $(".message-close").on('click', function () {
      $(".message-inp").css("display", "none");
    });
    // 我要留言确定按钮
    $(".inp-sure").on('click', function () {
      if (!$("#textarea").val().trim()) {
        showMsg("输入内容不能为空!", 'center');
        return;
      }
      var myDate = new Date()
      var myMonth = myDate.getMonth() + 1
      var myDay = myDate.getDate();
      myMonth < 10 ? myMonth = '0' + myMonth : myMonth;
      myDay < 10 ? myDay = '0' + myDay : myDay;
      var Time = myDate.getFullYear() + '-' + myMonth + '-' + myDay
      var lis = $('<li class="message-box-list">\n' +
          '        <span>工人: 妞妞</span>\n' +
          '        <span>' + Time + '</span>\n' +
          '        <p>' + $("#textarea").val() + '</p>\n' +
          '      </li>');
      $('.message-box').prepend(lis);
      // ajax发送表单
      var cId = 111;  // 被投票人id
      var uId = 222;  // 投票人id
      var uIp = returnCitySN["cip"];  // 投票人ip
      // console.log(returnCitySN["cip"] + ',' + returnCitySN["cname"] + ',' + returnCitySN["cid"]);
      $.ajax({
        url: '',
        dataType: 'json',
        type: 'post',
        data: {'cId': cId,'uId': uId,'uIp': uIp,'uTxt': $('#textarea').val()},
        success: function (data) {
          showMsg('发表成功!','center');
        }
      })
      // 清空输入框
      $('#textarea').val('');
      $(".message-inp").css("display", "none");

    });
    // 分享遮罩
    $('body').on('click', function () {
      $("#share").css("display", "none");
      move(document);
    })
  });
  // 判断文本域字符数
  function font_siz() {
    var txt = $("#textarea").val();
    var num = $("#textarea").val().length;
    if (num <= 40) {
      $("#num").text(num);
    } else {
      $("#textarea").val(txt.substring(0, 40))  // 截取字符串
      alert("最多输入40个字符");
    }
  };
  // 生成二维码
  var qrcode = new QRCode('qrcode', 'http://www.baidu.com');
  // 点击预览
  var previewImg = $('<div id="preview-img"></div>');
  previewImg.appendTo('body');
  $('.works-box img').each(function (index,value) {
    $(value).on('click', function () {
      var img = $(this).clone(false)[0];
      previewImg.html(img);
      $('#preview-img').css('display','block');
      stop('#preview-img')
    })
  })
  $('#preview-img').on('click', function () {
    $(this).css('display','none');
    move(document)
  })
  // 滑屏
  /***禁止滑动***/
  function stop(ele){
    $('body').css('overflow','hidden');
    $(ele).on('touchmove', function (e) {
      e.preventDefault();
    })
  }
  /***取消滑动限制***/
  function move(ele){
    $('body').css('overflow','');
    $(ele).off('touchmove', function (e) {
      e.preventDefault();
    })
  }
</script>
</html>